import styled from 'styled-components'

const HomeContainer = styled.div`
        header{
            height:.44rem;
            background:#ee742f;
            color:#fff;
            line-height:.44rem;
            text-align:center;
            font-size:.2rem;
            font-weight:100;           
        
        }
        >div{
            img{
            width:100%;
        }
        }
        .slider.am-carousel.my-carousel{
            height:0 !important;
            padding-bottom:66.666667%;
            .slider-list{
                width:max-content !important;
                padding-bottom:66.6666667%;
            }
        }
        
`

const HotCateContainer = styled.div`
    div{
        background:#fff;
        line-height:.45rem;
        color:#666;
        font-size:.14rem;
        padding:0 .1rem;
    }
    div:first-child{
        padding-left:.15rem;
        height:.45rem;
    }
`
const Top10Container = styled.div`
    background:#f5f5f5;
    > div {
        height:.37rem;
        padding:0 .15rem;
        display:table-cell;
        vertical-align:bottom;
        color:#666;
    }
    ul {
        display:flex;
        flex-wrap:wrap;
        li{
            width:50%;
            dl{
                background:#fff;
                dt{
                    font-size:.2rem;
                    display:flex;   
                }
                dd{
                        padding:.1rem;
                        display:flex;
                        flex-direction:column;
                        align-items:center;
                        h2{
                            font-weight:normal;
                            font-size:.2rem;  
                        }
                        h3{
                                font-weight:normal;
                                font-size:.12rem;
                                color:#999;
                            }
                    }
            }
            padding-top:.15rem;
            &:nth-child(odd){
                padding-left:.15rem;
                padding-right:calc(.15rem/2)
            }
            &:nth-child(even){
                padding-right:.15rem;
                padding-left:calc(.15rem/2)
            }
        
        }
    }
`
export{
     HomeContainer,
     HotCateContainer,
     Top10Container
     
}